<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>弹窗</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .zz {
            height: 1500px;
            background-color: #718080;
            /*filter: blur(6px);
            -webkit-filter: blur(6px);*/
            opacity: 0.8;
            display: none;
        }
        
        main {
            height: 1500px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .on {
            position: absolute;
            top: 0;
        }
        
        button {
            display: block;
            width: 100px;
            height: 50px;
            border: 1px solid blue;
            margin: 0 auto;
            cursor: pointer;
        }
        
        #form_d {
            width: 401px;
            height: 203px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            top: 1050px;
            cursor: move;
        }
        
        #text {
            height: 41px;
            background-color: #eee;
            position: relative;
        }
        
        h2 {
            font-size: 20px;
            line-height: 41px;
            text-align: center;
            margin: 0;
        }
        
        p {
            position: absolute;
            top: -15px;
            right: 10px;
            font-size: 23px;
            cursor: pointer;
        }
        
        form {
            text-align: center;
        }
        
        form label {
            display: block;
            margin: 10px;
            font-size: 18px;
        }
        
        form label:first-child {
            margin-top: 25px;
        }
        
        input[type=text] {
            width: 260px;
            height: 30px;
            padding-left: 13px;
        }
        
        .d {
            width: 230px;
            height: 32px;
            background-color: #c0c0c0;
            font-size: 18px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="zz">
        <div id="form_d">
            <section id="text">
                <h2>用户登录</h2>
                <p id="p">×</p>
            </section>
            <section>
                <form action="">
                    <label for="zh">账号: <input type="text" placeholder="请输入用户名" id="zh"></label>
                    <label for="mm">密码: <input type="text" placeholder="请输入密码" id="mm"></label>
                    <input type="button" value="登录" class="d">
                </form>
            </section>
        </div>
    </div>

    <main>

    </main>
    <button type="button">来点我</button>
</body>

</html>
<script>
弹窗居中
// left = 页面宽 - 弹窗宽/2 + 滚动条的left
// top = 页面高 - 弹窗高/2 + 滚动条的top

// 弹窗移动
// 使用move,获取鼠标在弹窗上的位置，然后使用绝对定位来改变top和left值就可以移动
    $(':button').click(function () {
        $('main').css('display', 'none');
        $('.zz').show();
    });
    $('#p').click(function(){
        $('.zz').hide();
        $('main').css('display', 'block');
    });

    show();
    function show(){
        var ymk=$(window).width();
        var gdtl=$(window).scrollLeft();
        var ymg=$(window).height();
        var gdtt=$(window).scrollTop();

        var left=ymk-401/2+gdtl;
        var top=ymg-203/2+gdtt;

        $('.zz').css({
            left:left+'px',
            top:top+'px'
        });
    }
    $(window).scroll(function(){
        show();
    });
</script>